// 如果三方插件 很大，我们的业务代码也很大 那么加载后的js文件就巨大
//  并且第三方文件 基本不会变，而我们的业务代码会经常变，那么要经常打包成大文件
// 问题： 浏览器加载缓慢
// 解决办法：将lodash绑定到window._ = _ 上，这样就不需要我们自己单独在引入了

//  照常写但是webpack 配置了这个进行代码分割
// 两种方式
//  1.webpack 同步代分割:
// import _ from "lodash";

//  2.异步方式
function getComponent() {
  return import(/* webpackChunkName:"lodash" */ "lodash").then((res) => {
    console.log(res);
    let _ = res.default;
    console.dir(_);

    let div = document.createElement("div");
    div.innerText = "async div";
    return div;
  });
}

let btn = document.createElement("button");
btn.innerText = "动态添加元素";
document.body.appendChild(btn);
// 异步组件 就是这个函数在什么情况下执行,
// 下面以点击事件模拟异步加载组件实现代码分割
btn.onclick = function() {
  getComponent().then((ele) => document.body.appendChild(ele));
};

export const add = (a, b) => {
  console.log(a + b);
};

export const minus = () => {
  console.log(a - b);
};
